<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<link rel="image_src" type="image/jpeg" href="/images/logo.png" />

<!-- Site Properities -->
<meta name="generator" content="DocPad v6.79.4" />
<title>Modal | Semantic UI</title>

<meta name="description" content="A modal displays content that temporarily blocks interactions with the main view of a site" />
<meta name="keywords" content="html5, ui, library, framework, javascript" />
  
  <script src="/javascript/library/detect.min.js"></script>
  <script src="/javascript/library/jquery.min.js"></script>
  <script src="/javascript/library/clipboard.min.js"></script>
  <script src="/javascript/library/cookie.min.js"></script>
  <script src="/javascript/library/easing.min.js"></script>
  <script src="/javascript/library/highlight.min.js"></script>
  <script src="/javascript/library/history.min.js"></script>
  <script src="/javascript/library/state.js"></script>
  <script src="/javascript/library/tablesort.min.js"></script>
  <script src="/javascript/library/underscore.min.js"></script>





<script src="/dist/semantic.min.js"></script>



<script src="/javascript/docs.js"></script>

  
<link rel="stylesheet" type="text/css" class="ui" href="/dist/semantic.min.css">




<link rel="stylesheet" type="text/css" href="/stylesheets/docs.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/rtl.css">





  
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-44039803-2', 'auto');
  ga('send', 'pageview');
</script>

  
<script type="text/javascript">
  window.liveSettings = {
    api_key    : '9ede3015b9f84c1aabc81ab839c55d74',
    parse_attr : [
      'data-title',
      'data-content'
    ],
    detectlang   : false,
    autocollect  : true,
    ignore_tags  : ['i', 'code', 'pre'],
    parse_attr   : ['data-title', 'data-content', 'data-text'],
    ignore_class : ['code', 'anchor']
  };
</script>
<script type="text/javascript" src="//cdn.transifex.com/live.js"></script>


</head>
<body id="example" class="modal-page" ontouchstart="">
  
  <div class="ui vertical inverted sidebar menu" id="toc">
  








<div class="item">
  <a class="ui logo icon image" href="/">
    <img src="/images/logo.png">
  </a>
  <a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
  <b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
  <b>New in 2.4</b>
</a>
<div class="item">
  <div class="header">Introduction</div>
  <div class="menu">
    
      <a class="item" href="/introduction/integrations.html">
        Integrations
      </a>
    
      <a class="item" href="/introduction/build-tools.html">
        Build Tools
      </a>
    
      <a class="item" href="/introduction/advanced-usage.html">
        Recipes
      </a>
    
      <a class="item" href="/introduction/glossary.html">
        Glossary
      </a>
    
  </div>
</div>
<div class="item">
  <div class="header">Usage</div>
  <div class="menu">
    
      <a class="item" href="/usage/theming.html">
        Theming
      </a>
    
      <a class="item" href="/usage/layout.html">
        Layouts
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Globals</div>
  <div class="menu">
    
      <a class="item" href="/globals/reset.html">
        Reset
        
      </a>
    
      <a class="item" href="/globals/site.html">
        Site
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Elements</div>
  <div class="menu">
    
      <a class="item" href="/elements/button.html">
        Button
        
      </a>
    
      <a class="item" href="/elements/container.html">
        Container
        
      </a>
    
      <a class="item" href="/elements/divider.html">
        Divider
        
      </a>
    
      <a class="item" href="/elements/flag.html">
        Flag
        
      </a>
    
      <a class="item" href="/elements/header.html">
        Header
        
      </a>
    
      <a class="item" href="/elements/icon.html">
        Icon
        
      </a>
    
      <a class="item" href="/elements/image.html">
        Image
        
      </a>
    
      <a class="item" href="/elements/input.html">
        Input
        
      </a>
    
      <a class="item" href="/elements/label.html">
        Label
        
      </a>
    
      <a class="item" href="/elements/list.html">
        List
        
      </a>
    
      <a class="item" href="/elements/loader.html">
        Loader
        
      </a>
    
      <a class="item" href="/elements/placeholder.html">
        Placeholder
        
      </a>
    
      <a class="item" href="/elements/rail.html">
        Rail
        
      </a>
    
      <a class="item" href="/elements/reveal.html">
        Reveal
        
      </a>
    
      <a class="item" href="/elements/segment.html">
        Segment
        
      </a>
    
      <a class="item" href="/elements/step.html">
        Step
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Collections</div>
  <div class="menu">
    
      <a class="item" href="/collections/breadcrumb.html">
        Breadcrumb
        
      </a>
    
      <a class="item" href="/collections/form.html">
        Form
        
      </a>
    
      <a class="item" href="/collections/grid.html">
        Grid
        
      </a>
    
      <a class="item" href="/collections/menu.html">
        Menu
        
      </a>
    
      <a class="item" href="/collections/message.html">
        Message
        
      </a>
    
      <a class="item" href="/collections/table.html">
        Table
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Views</div>
  <div class="menu">
    
      <a class="item" href="/views/advertisement.html">
        Advertisement
        
      </a>
    
      <a class="item" href="/views/card.html">
        Card
        
      </a>
    
      <a class="item" href="/views/comment.html">
        Comment
        
      </a>
    
      <a class="item" href="/views/feed.html">
        Feed
        
      </a>
    
      <a class="item" href="/views/item.html">
        Item
        
      </a>
    
      <a class="item" href="/views/statistic.html">
        Statistic
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class="active  header">Modules</div>
  <div class="menu">
    
      <a class="item" href="/modules/accordion.html">
        Accordion
        
      </a>
  
      <a class="item" href="/modules/checkbox.html">
        Checkbox
        
      </a>
  
      <a class="item" href="/modules/dimmer.html">
        Dimmer
        
      </a>
  
      <a class="item" href="/modules/dropdown.html">
        Dropdown
        
      </a>
  
      <a class="item" href="/modules/embed.html">
        Embed
        
      </a>
  
      <a class="active item" href="/modules/modal.html">
        Modal
        
      </a>
  
      <a class="item" href="/modules/popup.html">
        Popup
        
      </a>
  
      <a class="item" href="/modules/progress.html">
        Progress
        
      </a>
  
      <a class="item" href="/modules/rating.html">
        Rating
        
      </a>
  
      <a class="item" href="/modules/search.html">
        Search
        
      </a>
  
      <a class="item" href="/modules/shape.html">
        Shape
        
      </a>
  
      <a class="item" href="/modules/sidebar.html">
        Sidebar
        
      </a>
  
      <a class="item" href="/modules/sticky.html">
        Sticky
        
      </a>
  
      <a class="item" href="/modules/tab.html">
        Tab
        
      </a>
  
      <a class="item" href="/modules/transition.html">
        Transition
        
      </a>
  
  </div>
</div>
<div class="item">
  <div class=" header">Behaviors</div>
  <div class="menu">
    
      <a class="item" href="/behaviors/api.html">
        API
        
      </a>
    
      <a class="item" href="/behaviors/form.html">
        Form Validation
        
      </a>
    
      <a class="item" href="/behaviors/visibility.html">
        Visibility
        
      </a>
    
  </div>
</div>

</div>

<div class="ui black big launch right attached fixed button">
  <i class="content icon"></i>
  <span class="text">Menu</span>
</div>
  




<div class="ui fixed inverted main menu">
  <div class="ui container">
    <a class="launch icon item">
      <i class="content icon"></i>
    </a>
    
      <div class="item">
        Modal
      </div>
    
    <div class="right menu">
      
      <div class="vertically fitted borderless item">
        <iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
      </div>
      
      <!--
      <div class="item">
        <div class="ui hidden right aligned search input" id="search">
          <div class="ui transparent icon input">
            <input class="prompt" type="text" placeholder="Search...">
            <i class="inverted search link icon" data-content="Search UI"></i>
          </div>
          <div class="results"></div>
        </div>
      </div>
      -->
    </div>
  </div>
</div>

  <div class="pusher">
    <div class="full height">
      <div class="toc">
        <div class="ui vertical inverted menu">
          








<div class="item">
  <a class="ui logo icon image" href="/">
    <img src="/images/logo.png">
  </a>
  <a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
  <b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
  <b>New in 2.4</b>
</a>
<div class="item">
  <div class="header">Introduction</div>
  <div class="menu">
    
      <a class="item" href="/introduction/integrations.html">
        Integrations
      </a>
    
      <a class="item" href="/introduction/build-tools.html">
        Build Tools
      </a>
    
      <a class="item" href="/introduction/advanced-usage.html">
        Recipes
      </a>
    
      <a class="item" href="/introduction/glossary.html">
        Glossary
      </a>
    
  </div>
</div>
<div class="item">
  <div class="header">Usage</div>
  <div class="menu">
    
      <a class="item" href="/usage/theming.html">
        Theming
      </a>
    
      <a class="item" href="/usage/layout.html">
        Layouts
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Globals</div>
  <div class="menu">
    
      <a class="item" href="/globals/reset.html">
        Reset
        
      </a>
    
      <a class="item" href="/globals/site.html">
        Site
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Elements</div>
  <div class="menu">
    
      <a class="item" href="/elements/button.html">
        Button
        
      </a>
    
      <a class="item" href="/elements/container.html">
        Container
        
      </a>
    
      <a class="item" href="/elements/divider.html">
        Divider
        
      </a>
    
      <a class="item" href="/elements/flag.html">
        Flag
        
      </a>
    
      <a class="item" href="/elements/header.html">
        Header
        
      </a>
    
      <a class="item" href="/elements/icon.html">
        Icon
        
      </a>
    
      <a class="item" href="/elements/image.html">
        Image
        
      </a>
    
      <a class="item" href="/elements/input.html">
        Input
        
      </a>
    
      <a class="item" href="/elements/label.html">
        Label
        
      </a>
    
      <a class="item" href="/elements/list.html">
        List
        
      </a>
    
      <a class="item" href="/elements/loader.html">
        Loader
        
      </a>
    
      <a class="item" href="/elements/placeholder.html">
        Placeholder
        
      </a>
    
      <a class="item" href="/elements/rail.html">
        Rail
        
      </a>
    
      <a class="item" href="/elements/reveal.html">
        Reveal
        
      </a>
    
      <a class="item" href="/elements/segment.html">
        Segment
        
      </a>
    
      <a class="item" href="/elements/step.html">
        Step
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Collections</div>
  <div class="menu">
    
      <a class="item" href="/collections/breadcrumb.html">
        Breadcrumb
        
      </a>
    
      <a class="item" href="/collections/form.html">
        Form
        
      </a>
    
      <a class="item" href="/collections/grid.html">
        Grid
        
      </a>
    
      <a class="item" href="/collections/menu.html">
        Menu
        
      </a>
    
      <a class="item" href="/collections/message.html">
        Message
        
      </a>
    
      <a class="item" href="/collections/table.html">
        Table
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Views</div>
  <div class="menu">
    
      <a class="item" href="/views/advertisement.html">
        Advertisement
        
      </a>
    
      <a class="item" href="/views/card.html">
        Card
        
      </a>
    
      <a class="item" href="/views/comment.html">
        Comment
        
      </a>
    
      <a class="item" href="/views/feed.html">
        Feed
        
      </a>
    
      <a class="item" href="/views/item.html">
        Item
        
      </a>
    
      <a class="item" href="/views/statistic.html">
        Statistic
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class="active  header">Modules</div>
  <div class="menu">
    
      <a class="item" href="/modules/accordion.html">
        Accordion
        
      </a>
  
      <a class="item" href="/modules/checkbox.html">
        Checkbox
        
      </a>
  
      <a class="item" href="/modules/dimmer.html">
        Dimmer
        
      </a>
  
      <a class="item" href="/modules/dropdown.html">
        Dropdown
        
      </a>
  
      <a class="item" href="/modules/embed.html">
        Embed
        
      </a>
  
      <a class="active item" href="/modules/modal.html">
        Modal
        
      </a>
  
      <a class="item" href="/modules/popup.html">
        Popup
        
      </a>
  
      <a class="item" href="/modules/progress.html">
        Progress
        
      </a>
  
      <a class="item" href="/modules/rating.html">
        Rating
        
      </a>
  
      <a class="item" href="/modules/search.html">
        Search
        
      </a>
  
      <a class="item" href="/modules/shape.html">
        Shape
        
      </a>
  
      <a class="item" href="/modules/sidebar.html">
        Sidebar
        
      </a>
  
      <a class="item" href="/modules/sticky.html">
        Sticky
        
      </a>
  
      <a class="item" href="/modules/tab.html">
        Tab
        
      </a>
  
      <a class="item" href="/modules/transition.html">
        Transition
        
      </a>
  
  </div>
</div>
<div class="item">
  <div class=" header">Behaviors</div>
  <div class="menu">
    
      <a class="item" href="/behaviors/api.html">
        API
        
      </a>
    
      <a class="item" href="/behaviors/form.html">
        Form Validation
        
      </a>
    
      <a class="item" href="/behaviors/visibility.html">
        Visibility
        
      </a>
    
  </div>
</div>

        </div>
      </div>
      <div class="article">
        <link rel="stylesheet/less" type="text/css" href="/src/definitions/modules/modal.less" />
<script src="/javascript/modal.js"></script>



<div class="ui masthead vertical tab segment">
  <div class="ui container">
    <div class="introduction">

      <h1 class="ui header">
        Modal
        
        <div class="sub header">
          
          <a class="twitter-share-button twitter"
            href="http://twitter.com/share"
            data-text="Semantic UI is a next generation UI framework"
            data-url="http://semantic-ui.com"
            data-via="semanticui">
          </a>
          <script type="text/javascript">
          window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
          </script>
          <iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
          
          A modal displays content that temporarily blocks interactions with the main view of a site
        </div>
      </h1>

      <div class="ui hidden divider"></div>

      <div class="ui right floated main menu">
        <a class="bug popup icon item" data-content="Edit This Page" href="https://github.com/Semantic-Org/Semantic-UI-Docs/edit/master/server/documents/modules/modal.html.eco">
          <i class="edit icon"></i>
        </a>
        
        <a class="bug popup icon item" data-content="Submit Bug Report" href="https://github.com/Semantic-Org/Semantic-UI/issues/new?title=[Modal] - Your Bug Name&body=**Steps to Reproduce**%0A1. Do something%0A2. Do something else.%0A3. Do one last thing.%0A%0A**Expected**%0AThe Modal should do this%0A%0A**Result**%0AThe Modal does not do this%0A%0A**Testcase**%0A(fork this to get started)%0Ahttp://jsfiddle.net/rduvhn8u/1/">
          <i class="bug icon"></i>
        </a>
        
        <a class="github popup icon item" data-content="View project on GitHub" href="https://github.com/Semantic-Org/Semantic-UI">
          <i class="alternate github icon"></i>
        </a>
      </div>
      <div class="ui right floated main menu">
        <a class="music popup icon item" data-content="Play Music">
          <i class="music icon"></i>
        </a>
        <div class="ui language dropdown right floating icon item" id="languages" data-content="Select Language">
          <i class="world icon"></i>
          <div class="menu">
            <div class="header">Select Language</div>
            <div class="ui icon search input">
              <i class="search icon"></i>
              <input type="text" placeholder="Search languages...">
            </div>
            <div class="scrolling menu">
  <div class="item" data-percent="100" data-value="en" data-english="English">
    <span class="description">English</span>
    English
  </div>
  <div class="item" data-percent="94" data-value="da" data-english="Danish">
    <span class="description">dansk</span>
    Danish
  </div>
  <div class="item" data-percent="94" data-value="es" data-english="Spanish">
    <span class="description">Español</span>
    Spanish
  </div>
  <div class="item" data-percent="34" data-value="zh" data-english="Chinese">
    <span class="description">简体中文</span>
    Chinese
  </div>
  <div class="item" data-percent="54" data-value="zh_TW" data-english="Chinese (Taiwan)">
    <span class="description">中文 (臺灣)</span>
    Chinese (Taiwan)
  </div>
  <div class="item" data-percent="79" data-value="fa" data-english="Persian">
    <span class="description">پارسی</span>
    Persian
  </div>
  <div class="item" data-percent="41" data-value="fr" data-english="French">
    <span class="description">Français</span>
    French
  </div>
  <div class="item" data-percent="37" data-value="el" data-english="Greek">
    <span class="description">ελληνικά</span>
    Greek
  </div>
  <div class="item" data-percent="37" data-value="ru" data-english="Russian">
    <span class="description">Русский</span>
    Russian
  </div>
  <div class="item" data-percent="36" data-value="de" data-english="German">
    <span class="description">Deutsch</span>
    German
  </div>
  <div class="item" data-percent="23" data-value="it" data-english="Italian">
    <span class="description">Italiano</span>
    Italian
  </div>
  <div class="item" data-percent="21" data-value="nl" data-english="Dutch">
    <span class="description">Nederlands</span>
    Dutch
  </div>
  <div class="item" data-percent="19" data-value="pt_BR" data-english="Portuguese">
    <span class="description">Português(BR)</span>
    Portuguese
  </div>
  <div class="item" data-percent="17" data-value="id" data-english="Indonesian">
    <span class="description">Indonesian</span>
    Indonesian
  </div>
  <div class="item" data-percent="12" data-value="lt" data-english="Lithuanian">
    <span class="description">Lietuvių</span>
    Lithuanian
  </div>
  <div class="item" data-percent="11" data-value="tr" data-english="Turkish">
    <span class="description">Türkçe</span>
    Turkish
  </div>
  <div class="item" data-percent="10" data-value="kr" data-english="Korean">
    <span class="description">한국어</span>
    Korean
  </div>
  <div class="item" data-percent="7"  data-value="ar" data-english="Arabic">
    <span class="description">العربية</span>
    Arabic
  </div>
  <div class="item" data-percent="6"  data-value="hu" data-english="Hungarian">
    <span class="description">Magyar</span>
    Hungarian
  </div>
  <div class="item" data-percent="6"  data-value="vi" data-english="Vietnamese">
    <span class="description">tiếng Việt</span>
    Vietnamese
  </div>
  <div class="item" data-percent="5"  data-value="sv" data-english="Swedish">
    <span class="description">svenska</span>
    Swedish
  </div>
  <div class="item" data-precent="4"  data-value="pl" data-english="Polish">
    <span class="description">polski</span>
    Polish
  </div>
  <div class="item" data-percent="6"  data-value="ja" data-english="Japanese">
    <span class="description">日本語</span>
    Japanese
  </div>
  <div class="item" data-percent="0"  data-value="ro" data-english="Romanian">
    <span class="description">românește</span>
    Romanian
  </div>
</div>

          </div>
        </div>
      </div>

      
<!--       <a href="/module.html" class="ui right floated basic right labeled icon button">
        Learn about Modules
        <i class="help icon" data-title="What are Modules?" data-content="Modules are UI elements that include behaviors as part of their definition. Modules require some knowledge of Javascript to use."></i>
      </a> -->
      
      
      <div class="ui floating dropdown theme basic button" data-element="modal" data-type="module">
        <span class="text">2 Themes</span>
        <div class="menu transition hidden">
          
            <div class="item" data-value="Default" data-text="Default Theme">Default</div>
          
            <div class="item" data-value="Material" data-text="Material Theme">Material</div>
          
        </div>
      </div>
      
      
      <div class="ui download primary button">
        Download
      </div>
      <div class="ui flowing download basic popup">
        <div class="ui divided equal width relaxed center aligned choice grid">
          <div class="framework column">
            <h4 class="ui center aligned header">UI Framework</h4>
            <div class="ui list">
              <div class="item"><i class="green check icon"></i> Themable</div>
              <div class="item"><i class="green check icon"></i> Build Tools</div>
            </div>
            <div class="ui primary fluid button">Choose</div>
          </div>
          <div class="standalone column">
            <h4 class="ui center aligned header">Standalone</h4>
            <div class="ui list">
              <div class="item">Default Theme</div>
              <div class="item">Precompiled</div>
            </div>
            <div class="ui fluid button basic">Choose</div>
          </div>
        </div>
        <div class="ui divided equal height relaxed center aligned framework grid">
          <div class="column">
            <div class="ui header">Semantic UI</div>
            <a class="ui primary button" href="https://github.com/Semantic-Org/Semantic-UI/archive/master.zip">
              Download ZIP
            </a>
            <a class="ui button" href="/introduction/getting-started.html">Getting Started</a>
            <h4 class="ui header">Package Managers</h4>
            <div class="ui form">
              <div class="field">
                <label>NPM</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui">
                </div>
              </div>
              <div class="field">
                <label>Git</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/Semantic-UI.git">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="ui divided equal height relaxed center aligned standalone grid">
          <div class="column">
            <div class="ui header">Standalone Modal</div>
            <a class="ui primary button" href="https://github.com/Semantic-Org/UI-Modal/archive/master.zip">
              Download ZIP
            </a>
            <a class="ui button" href="https://github.com/Semantic-Org/UI-Modal/">
              View GitHub
            </a>
            <h4 class="ui header">Package Managers</h4>
            <div class="ui form">
              <div class="field">
                <label>Bower</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="bower install semantic-ui-modal">
                </div>
              </div>
              <div class="field">
                <label>NPM</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui-modal">
                </div>
              </div>
              <div class="field">
                <label>Git</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/UI-Modal.git">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="advertisement">
      
      <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=semanticuicom" id="_carbonads_js"></script>
      
    </div>
    
    
    
    
    
      
        
      
        
      
        
      
        
      
      <div class="ui four item stackable tabs menu">
        
          <a class="active item" data-tab="definition">Definition</a>
          
        
          <a class="item" data-tab="examples">Examples</a>
          
        
          <a class="item" data-tab="usage">Usage</a>
          
        
          <a class="item" data-tab="settings">Settings</a>
          
        
      </div>
    
  </div>
</div>

  <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
  <div class="bsa-cpc"></div>
  <script>
    (function(){
      if(typeof _bsa !== 'undefined' && _bsa) {
      _bsa.init('default', 'CVAIKK7I', 'placement:semanticuicom', {
        target: '.bsa-cpc',
        align: 'horizontal',
        disable_css: 'true'
      });
        }
    })();
  </script>
  <div class="ui vertical beg transition hidden segment">
    <i class="large red delete link icon"></i>
    <div class="ui red header">
      <i class="disabled warning sign icon"></i>
      <div class="content">
        Want to Support Open Source? Whitelist Your Ad-Blocker.
        <div class="sub header">
          We promise to not show more than one small ad per page. Dont worry, hiding this message will make sure you won't get nagged again.
        </div>
      </div>
    </div>
  </div>



<div class="main ui container">

  <div class="ui header-example modal">
    <div class="header">Header</div>
    <div class="content">
      Content
      <div class="ui button">Button</div>
    </div>
  </div>

  <div class="ui first coupled modal">
    <div class="header">
      Modal #1
    </div>
    <div class="image content">
      <div class="image">
        <i class="right arrow icon"></i>
      </div>
      <div class="description">
        <p>We have more to share with you. Follow us along to modal 2</p>
      </div>
    </div>
    <div class="actions">
      <div class="ui primary button">Proceed</div>
    </div>
  </div>
  <div class="ui small second coupled modal">
    <div class="header">
      Modal #2
    </div>
    <div class="content">
      <div class="description">
        <p>That's everything!</p>
      </div>
    </div>
    <div class="actions">
      <div class="ui approve button">
        <i class="checkmark icon"></i>
        All Done
      </div>
    </div>
  </div>

  <div class="ui small basic test modal">
    <div class="ui icon header">
      <i class="archive icon"></i>
      Archive Old Messages
    </div>
    <div class="content">
      <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
    </div>
    <div class="actions">
      <div class="ui red basic cancel inverted button">
        <i class="remove icon"></i>
        No
      </div>
      <div class="ui green ok inverted button">
        <i class="checkmark icon"></i>
        Yes
      </div>
    </div>
  </div>
  <div class="ui mini test modal">
    <div class="header">
      Delete Your Account
    </div>
    <div class="content">
      <p>Are you sure you want to delete your account</p>
    </div>
    <div class="actions">
      <div class="ui negative button">
        No
      </div>
      <div class="ui positive right labeled icon button">
        Yes
        <i class="checkmark icon"></i>
      </div>
    </div>
  </div>

  <div class="ui special modal">
    <div class="header">
      Delete Your Account
    </div>
    <div class="content">
      <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
      <div class="ui hidden divider"></div>
    </div>
    <div class="actions">
      <div class="ui negative button">
        No
      </div>
      <div class="ui positive right labeled icon button">
        Yes
        <i class="checkmark icon"></i>
      </div>
    </div>
  </div>

  <div class="ui tiny test modal">
    <div class="header">
      Delete Your Account
    </div>
    <div class="content">
      <p>Are you sure you want to delete your account</p>
    </div>
    <div class="actions">
      <div class="ui negative button">
        No
      </div>
      <div class="ui positive right labeled icon button">
        Yes
        <i class="checkmark icon"></i>
      </div>
    </div>
  </div>

  <div class="ui small test modal">
    <div class="header">
      Delete Your Account
    </div>
    <div class="content">
      <p>Are you sure you want to delete your account</p>
    </div>
    <div class="actions">
      <div class="ui negative button">
        No
      </div>
      <div class="ui positive right labeled icon button">
        Yes
        <i class="checkmark icon"></i>
      </div>
    </div>
  </div>

  <div class="ui fullscreen modal">
    <i class="close icon"></i>
    <div class="header">
      Update Your Settings
    </div>
    <div class="content">
      <div class="ui form">
        <h4 class="ui dividing header">Give us your feedback</h4>
        <div class="field">
          <label>Feedback</label>
          <textarea></textarea>
        </div>
        <div class="field">
          <div class="ui checkbox">
            <input type="checkbox" checked="checked" name="contact-me">
            <label>It's okay to contact me.</label>
          </div>
        </div>
      </div>
    </div>
    <div class="actions">
      <div class="ui button">Cancel</div>
      <div class="ui green button">Send</div>
    </div>
  </div>

  <div class="ui large test modal">
    <div class="header">
      Changing Your Thing
    </div>
    <div class="content">
      <p>Do you want to change that thing to something else?</p>
    </div>
    <div class="actions">
      <div class="ui negative button">
        No
      </div>
      <div class="ui positive right labeled icon button">
        Yes
        <i class="checkmark icon"></i>
      </div>
    </div>
  </div>

  <div class="ui longer test modal">
    <div class="header">
      Profile Picture
    </div>
    <div class="scrolling image content">
      <div class="ui medium image">
        <img src="/images/wireframe/image.png">
      </div>
      <div class="description">
        <div class="ui header">Modal Header</div>
        <p>This is an example of expanded content that will cause the modal's dimmer to scroll</p>
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
        <div class="ui divider"></div>
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
        <div class="ui divider"></div>
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
        <div class="ui divider"></div>
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
        <div class="ui divider"></div>
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
        <div class="ui divider"></div>
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
        <div class="ui divider"></div>
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
      </div>
    </div>
    <div class="actions">
      <div class="ui primary approve button">
        Proceed
        <i class="right chevron icon"></i>
      </div>
    </div>
  </div>

  <div class="ui long test modal">
    <div class="header">
      Profile Picture
    </div>
    <div class="image content">
      <div class="ui medium image">
        <img src="/images/wireframe/image.png">
      </div>
      <div class="description">
        <div class="ui header">Modal Header</div>
        <p>This is an example of expanded content that will cause the modal's dimmer to scroll</p>
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
        <div class="ui divider"></div>
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
        <div class="ui divider"></div>
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
        <div class="ui divider"></div>
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
        <div class="ui divider"></div>
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
        <div class="ui divider"></div>
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
        <div class="ui divider"></div>
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
        <div class="ui divider"></div>
        <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
      </div>
    </div>
    <div class="actions">
      <div class="ui primary approve button">
        Proceed
        <i class="right chevron icon"></i>
      </div>
    </div>
  </div>

  <div class="ui inverted test modal">
    <div class="header">
      Select a Photo
    </div>
    <div class="image content">
      <div class="ui medium image">
        <img src="/images/avatar2/large/rachel.png">
      </div>
      <div class="description">
        <div class="ui header">Default Profile Image</div>
        <p>We've found the following <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your e-mail address.</p>
        <p>Is it okay to use this photo?</p>
      </div>
    </div>
    <div class="actions">
      <div class="ui black deny button">
        Nope
      </div>
      <div class="ui positive right labeled icon button">
        Yep, that's me
        <i class="checkmark icon"></i>
      </div>
    </div>
  </div>
  <div class="ui standard test modal">
    <div class="header">
      Select a Photo
    </div>
    <div class="image content">
      <div class="ui medium image">
        <img src="/images/avatar2/large/rachel.png">
      </div>
      <div class="description">
        <div class="ui header">Default Profile Image</div>
        <p>We've found the following <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your e-mail address.</p>
        <p>Is it okay to use this photo?</p>
      </div>
    </div>
    <div class="actions">
      <div class="ui black deny button">
        Nope
      </div>
      <div class="ui positive right labeled icon button">
        Yep, that's me
        <i class="checkmark icon"></i>
      </div>
    </div>
  </div>

  <div class="ui active tab" data-tab="definition">

    <h2 class="ui dividing header">Types</h2>

    <div class="example">
      <h4 class="ui header">Modal</h4>
      <p>A standard modal</p>
      <div class="code" data-demo="true" data-eval="$('.standard.test.modal').modal('show');">
      $('.ui.modal')
        .modal('show')
      ;
      </div>
      <div class="existing code" data-type="html">
        <div class="ui modal">
          <i class="close icon"></i>
          <div class="header">
            Profile Picture
          </div>
          <div class="image content">
            <div class="ui medium image">
              <img src="/images/avatar/large/chris.jpg">
            </div>
            <div class="description">
              <div class="ui header">We've auto-chosen a profile image for you.</div>
              <p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
              <p>Is it okay to use this photo?</p>
            </div>
          </div>
          <div class="actions">
            <div class="ui black deny button">
              Nope
            </div>
            <div class="ui positive right labeled icon button">
              Yep, that's me
              <i class="checkmark icon"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">Basic</h4>
      <p>A modal can reduce its complexity</p>
      <div class="code" data-demo="true" data-eval="$('.basic.test.modal').modal('show');">
      $('.ui.basic.modal')
        .modal('show')
      ;
      </div>
      <div class="existing code">
        <div class="ui basic modal">
          <div class="ui icon header">
            <i class="archive icon"></i>
            Archive Old Messages
          </div>
          <div class="content">
            <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
          </div>
          <div class="actions">
            <div class="ui red basic cancel inverted button">
              <i class="remove icon"></i>
              No
            </div>
            <div class="ui green ok inverted button">
              <i class="checkmark icon"></i>
              Yes
            </div>
          </div>
        </div>
      </div>
    </div>

    <h2 class="ui dividing header">Content</h2>

    <div class="no example">
      <h4 class="ui header">
        Header
      </h4>
      <p>A modal can have a header</p>
      <div class="code" data-type="html">
        <div class="ui modal">
          <div class="header">Header</div>
        </div>
      </div>
    </div>

    <div class="no example">
      <h4 class="ui header">
        Content
      </h4>
      <p>A modal can contain content</p>
      <div class="code" data-type="html">
        <div class="ui modal">
          <div class="header">Header</div>
          <div class="content">
            <p></p>
            <p></p>
            <p></p>
          </div>
        </div>
      </div>
    </div>

    <div class="no example">
      <h4 class="ui header">
        Image Content
        <span class="ui teal label">
          New in 2.0
        </span>
      </h4>
      <p>A modal can contain image content</p>
      <div class="ui ignored info message">
        Modals with image content must use the <code>image content</code> class in <code>2.0</code>. This is to make sure flex-box rules do not affect regular content.
      </div>
      <div class="code" data-type="html">
        <div class="ui modal">
          <div class="header">Header</div>
          <div class="image content">
            <img class="image">
            <div class="description">
              <p></p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="no example">
      <h4 class="ui header">
        Actions
      </h4>
      <p>A modal can contain a row of actions</p>
      <div class="ui ignored info message">
        <p>Close actions are applied by default to all button actions, in addition an <code>onApprove</code> or <code>onDeny</code> callback will fire if the elements match either selector.</p>
        <div class="code" data-type="css">
          approve  : '.positive, .approve, .ok',
          deny     : '.negative, .deny, .cancel'
        </div>
      </div>
      <div class="ui ignored warning message">
        <p>To prevent a modal action from causing the modal to close, you can <code>return false;</code> from either callback.</p>
      </div>
      <div class="code" data-type="html">
        <div class="ui modal">
          <div class="header">Header</div>
          <div class="content">
            <p></p>
          </div>
          <div class="actions">
            <div class="ui approve button">Approve</div>
            <div class="ui button">Neutral</div>
            <div class="ui cancel button">Cancel</div>
          </div>
        </div>
      </div>
    </div>

    <h2 class="ui dividing header">Variations</h2>

    <div class="no example">
      <h4 class="ui header">Full Screen</h4>
      <p>A modal can use the entire size of the screen</p>
      <div class="code" data-demo="true">
      $('.fullscreen.modal')
        .modal('show')
      ;
      </div>
    </div>
    <div class="no example">
      <h4 class="ui header">Size</h4>
      <p>A modal can vary in size</p>
      <div class="code" data-demo="true" data-eval="$('.mini.test.modal').not('.basic').modal('show')">
      $('.mini.modal')
        .modal('show')
      ;
      </div>
      <div class="code" data-demo="true" data-eval="$('.tiny.test.modal').not('.basic').modal('show')">
      $('.tiny.modal')
        .modal('show')
      ;
      </div>
      <div class="code" data-demo="true" data-eval="$('.small.test.modal').not('.basic').modal('show')">
      $('.small.modal')
        .modal('show')
      ;
      </div>
      <div class="code" data-demo="true" data-eval="$('.large.test.modal').modal('show')">
      $('.large.modal')
        .modal('show')
      ;
      </div>
    </div>

    <div class="no example">
      <h4 class="ui header">
        Scrolling Content
        <div class="ui teal label">New in 2.2.11</div>
      </h4>
      <p>A modal can use the entire size of the screen</p>
      <div class="code" data-type="html" data-variation="scrolling">
        <div class="ui modal">
          <div class="header">Header</div>
          <div class="scrolling content">
            <p>Very long content goes here</p>
          </div>
        </div>
      </div>
      <div class="code" data-demo="true">
      $('.ui.longer.modal')
        .modal('show')
      ;
      </div>
    </div>

    <h2 class="ui dividing header">States</h2>

    <div class="no example">
      <h4 class="ui header">Active</h4>
      <p>An active modal is visible on the page</p>
      <div class="visible code" data-type="html">
        <div class="ui active modal"></div>
      </div>
    </div>
  </div>

  <div class="ui tab" data-tab="examples">

    <h2 class="ui dividing header">Examples</h2>

    <div class="no example">
      <h4 class="ui header">
        Disabling Vertical Centering
        <div class="ui horizontal teal label">New in 2.3</div>
      </h4>
      <p>When your modal has dynamic content, or multiple steps, it can make sense to disable centering so content doesn't jump around vertically when its height changes.</p>
      <div class="code" data-demo="true">
      $('.special.modal')
        .modal({
          centered: false
        })
        .modal('show')
      ;
      </div>
    </div>

    <div class="no example">
      <h4 class="ui header">Scrolling Modal</h4>
      <p>When your modal content exceeds the height of the browser the scrollable area will automatically expand to include just enough space for scrolling, without scrolling the page below.</p>
      <div class="code" data-demo="true">
      $('.long.modal')
        .modal('show')
      ;
      </div>
    </div>

    <div class="no example">
      <h4 class="ui header">Internally Scrolling Content</h4>
      <p>You may prefer to have the content of your modal scroll itself, you can do this by using the <code>scrolling content</code> variation.</p>
      <div class="code" data-demo="true">
      $('.longer.modal')
        .modal('show')
      ;
      </div>
    </div>

    <div class="no example">
      <h4 class="ui header">Multiple Modals</h4>
      <p>A modal can open a second modal. If you use <code>allowMultiple: true</code> parameter the second modal will  be opened on top of the first modal. Otherwise the modal will be closed before the second modal is opened.</p>
      <div class="code" data-demo="true">
      // initialize all modals
      $('.coupled.modal')
        .modal({
          allowMultiple: true
        })
      ;
      // open second modal on first modal buttons
      $('.second.modal')
        .modal('attach events', '.first.modal .button')
      ;
      // show first immediately
      $('.first.modal')
        .modal('show')
      ;
      </div>
      <div class="code" data-demo="true">
      $('.coupled.modal')
        .modal({
          allowMultiple: false
        })
      ;
      // attach events to buttons
      $('.second.modal')
        .modal('attach events', '.first.modal .button')
      ;
      // show first now
      $('.first.modal')
        .modal('show')
      ;
      </div>
    </div>

    <div class="no example">
      <h4 class="ui header">Forcing a Choice</h4>
      <p>You can disable a modal's dimmer from being closed by click to force a user to make a choice</p>
      <div class="code" data-demo="true">
      $('.basic.test.modal')
        .modal('setting', 'closable', false)
        .modal('show')
      ;
      </div>
    </div>

    <div class="no example">
      <h4 class="ui header">Approve / Deny Callbacks</h4>
      <p>Modals will automatically tie approve deny callbacks to any positive/approve, negative/deny or ok/cancel buttons.
      <div class="ui ignored info message">
        If <code>onDeny</code>, <code>onApprove</code> or <code>onHide</code> returns false it will prevent the modal from closing
      </div>
      <div class="code" data-demo="true">
      $('.ui.basic.test.modal')
        .modal({
          closable  : false,
          onDeny    : function(){
            window.alert('Wait not yet!');
            return false;
          },
          onApprove : function() {
            window.alert('Approved!');
          }
        })
        .modal('show')
      ;
      </div>
    </div>

    <div class="no example">
      <h4 class="ui header">Attach events</h4>
      <p>A modal can attach events to another element</p>
      <div class="code" data-demo="true">
      $('.test.modal')
        .modal('attach events', '.test.button', 'show')
      ;
      </div>
      <div class="ui primary test button">Launch modal</div>
    </div>

    <div class="no example">
      <h4 class="ui header">Transitions</h4>
      <p>A modal can use any named ui transition.</p>
      <div class="ui animation selection dropdown">
        <input type="hidden" name="transition">
        <div class="default text">Choose transition</div>
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Horizontal Flip</div>
          <div class="item">Vertical Flip</div>
          <div class="item">Fade Up</div>
          <div class="item">Fade</div>
          <div class="item">Scale</div>
        </div>
      </div>
      <div class="ui clearing divider"></div>
      <div class="code">
      $('.selection.dropdown')
        .dropdown({
          onChange: function(value) {
            $('.test.modal')
              .modal('setting', 'transition', value)
              .modal('show')
            ;
          }
        })
      ;
      </div>
    </div>

    <div class="no example">
      <h4 class="ui header">Dimmer Variations</h4>
      <p>Modals can specify additional variations like <code>blurring</code> or <code>inverted</code> which adjust how the dimmer displays.</p>
      <div class="ui ignored info message">Full screen blurring modals are not performant for current-gen computers at widescreen resolutions with integrated graphics.</div>
      <div class="code" data-demo="true" data-eval="$('.ui.inverted.modal').modal({inverted: true}).modal('show')">
      $('.ui.modal')
        .modal({
          inverted: true
        })
        .modal('show')
      ;
      </div>
      <div class="code" data-demo="true" data-eval="$('.ui.standard.modal').modal({inverted: false, blurring: true}).modal('show')">
      $('.ui.modal')
        .modal({
          blurring: true
        })
        .modal('show')
      ;
      </div>
    </div>

  </div>

  <div class="ui tab" data-tab="usage">

    <h2 class="ui dividing header">Usage</h2>

    <h3 class="ui header">Initializing a modal</h3>
    <p>A modal can be included anywhere on the page. On initialization a modal's current size will be cached, and the element will be detached from the DOM and moved inside a dimmer.</p>
    <div class="ui info message">
      <div class="header">Why move modal content?</div>
      <p>Having a modal inside the page dimmer allows for 3D animations without having the 3D perspective settings alter the rest of the page content. Additionally, content outside the dimmer can be blurred or altered without affecting the modal's content.</p>
      <p>If you need to have your modal stay in its current location you can preserve its position using the setting <code>detachable: false</code></p>
    </div>
    <div class="code" data-type="javascript">
      $('.ui.modal')
        .modal()
      ;
    </div>
    <div class="code" data-type="html">
      <div class="ui modal">
        <i class="close icon"></i>
        <div class="header">
          Modal Title
        </div>
        <div class="image content">
          <div class="image">
            An image can appear on left or an icon
          </div>
          <div class="description">
            A description can appear on the right
          </div>
        </div>
        <div class="actions">
          <div class="ui button">Cancel</div>
          <div class="ui button">OK</div>
        </div>
      </div>
    </div>

    <h2 class="ui dividing header">Behavior</h2>

    <p>All the following behaviors can be called using the syntax:</p>
    <div class="code">
    $('.ui.modal')
      .modal('behavior name', argumentOne, argumentTwo)
    ;
    </div>

    <table class="ui definition celled sortable table segment">
      <thead>
        <tr>
          <th>Behavior</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>show</td>
          <td>Shows the modal</td>
        </tr>
        <tr>
          <td>hide</td>
          <td>Hides the modal</td>
        </tr>
        <tr>
          <td>toggle</td>
          <td>Toggles the modal</td>
        </tr>
        <tr>
          <td>refresh</td>
          <td>Refreshes centering of modal on page</td>
        </tr>
        <tr>
          <td>show dimmer</td>
          <td>Shows associated page dimmer</td>
        </tr>
        <tr>
          <td>hide dimmer</td>
          <td>Hides associated page dimmer</td>
        </tr>
        <tr>
          <td>hide others</td>
          <td>Hides all modals not selected modal in a dimmer</td>
        </tr>
        <tr>
          <td>hide all</td>
          <td>Hides all visible modals in the same dimmer</td>
        </tr>
        <tr>
          <td>cache sizes</td>
          <td>Caches current modal size</td>
        </tr>
        <tr>
          <td>can fit</td>
          <td>Returns whether the modal can fit on the page</td>
        </tr>
        <tr>
          <td>is active</td>
          <td>Returns whether the modal is active</td>
        </tr>
        <tr>
          <td>set active</td>
          <td>Sets modal to active</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="ui tab" data-tab="settings">

    <h2 class="ui dividing header">Settings</h2>

    <h3 class="ui header">Modal Settings
      <div class="sub header">Modal settings modify the modal's behavior</div>
    </h3>

    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
          <th>Setting</th>
          <th class="four wide">Default</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>detachable</td>
          <td>true</td>
          <td>If set to false will prevent the modal from being moved to inside the dimmer</td>
        </tr>
        <tr>
          <td>useFlex</td>
          <td>'auto'</td>
          <td>Auto will automatically use flex in browsers that support absolutely positioned elements inside flex containers. Setting to true/false will force this setting for all browsers.</td>
        </tr>
        <tr>
          <td>autofocus</td>
          <td>true</td>
          <td>When true, the first form input inside the modal will receive focus when shown.  Set this to false to prevent this behavior.</td>
        </tr>
        <tr>
          <td>observeChanges</td>
          <td>false</td>
          <td>Whether any change in <code>modal</code> DOM should automatically refresh cached positions</td>
        </tr>
        <tr>
          <td>allowMultiple</td>
          <td>false</td>
          <td>If set to true will not close other visible modals when opening a new one</td>
        </tr>
        <tr>
          <td>keyboardShortcuts</td>
          <td>true</td>
          <td>Whether to automatically bind keyboard shortcuts</td>
        </tr>
        <tr>
          <td>offset</td>
          <td>0</td>
          <td>A vertical offset to allow for content outside of modal, for example a close button, to be centered.</td>
        </tr>
        <tr>
          <td>context</td>
          <td>
          body
          </td>
          <td>Selector or jquery object specifying the area to dim</td>
        </tr>
        <tr>
          <td>closable</td>
          <td>
          true
          </td>
          <td>Setting to false will not allow you to close the modal by clicking on the dimmer</td>
        </tr>
        <tr>
          <td>dimmerSettings</td>
          <td>
          <div class="code" data-type="javascript">
          {
            closable : false,
            useCSS   : true
          }
          </div>
          </td>
          <td>You can specify custom settings to extend <a href="/modules/dimmer.html">UI dimmer</a></td>
        </tr>
        <tr>
          <td>transition</td>
          <td>
            scale
          </td>
          <td>Named transition to use when animating menu in and out, full list can be found in <a href="/modules/transition.html">ui transitions</a> docs.</td>
        </tr>
        <tr>
          <td>duration</td>
          <td>
            400
          </td>
          <td>Duration of animation</td>
        </tr>
        <tr>
          <td>queue</td>
          <td>
            false
          </td>
          <td>Whether additional animations should queue</td>
        </tr>
      </tbody>
    </table>

    <div class="ui horizontal section icon divider"><i class="icon setting"></i></div>
    <h3 class="ui header">Callbacks
      <div class="sub header">Callbacks specify a function to occur after a specific behavior.</div>
    </h3>


    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
          <th class="four wide">Setting</th>
          <th>Context</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>onShow</td>
          <td>Modal</td>
          <td>Is called when a modal starts to show.</td>
        </tr>
        <tr>
          <td>onVisible</td>
          <td>Modal</td>
          <td>Is called after a modal has finished showing animating.</td>
        </tr>
        <tr>
          <td>onHide($element)</td>
          <td>Modal</td>
          <td>Is called after a modal starts to hide. If the function returns <code>false</code>, the modal will not hide.</td>
        </tr>
        <tr>
          <td>onHidden</td>
          <td>Modal</td>
          <td>Is called after a modal has finished hiding animation.</td>
        </tr>
        <tr>
          <td>onApprove($element)</td>
          <td>Click</td>
          <td>Is called after a positive, approve or ok button is pressed. If the function returns <code>false</code>, the modal will not hide.</td>
        </tr>
        <tr>
          <td>onDeny($element)</td>
          <td>Modal</td>
          <td>Is called after a negative, deny or cancel button is pressed. If the function returns <code>false</code> the modal will not hide.</td>
        </tr>
      </tbody>
    </table>

    <h3 class="ui header">DOM Settings
      <div class="sub header">DOM settings specify how this module should interface with the DOM</div>
    </h3>

    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
        <th>Setting</th>
        <th class="four wide">Default</th>
        <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>namespace</td>
          <td>modal</td>
          <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
        </tr>
        <tr>
          <td>selector</td>
          <td colspan="2">
            <div class="code">
      selector    : {
        close    : '.close, .actions .button',
        approve  : '.actions .positive, .actions .approve, .actions .ok',
        deny     : '.actions .negative, .actions .deny, .actions .cancel'
      },
            </div>
          </td>
        </tr>
        <tr>
          <td>className</td>
          <td colspan="2">
            <div class="code">
      className : {
        active    : 'active',
        scrolling : 'scrolling'
      }
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <h3 class="ui header">Debug Settings
      <div class="sub header">Debug settings controls debug output to the console</div>
    </h3>

    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
          <th>Setting</th>
          <th class="four wide">Default</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>name</td>
          <td>Modal</td>
          <td>Name used in debug logs</td>
        </tr>
        <tr>
          <td>debug</td>
          <td>False</td>
          <td>Provides standard debug output to console</td>
        </tr>
        <tr>
          <td>performance</td>
          <td>True</td>
          <td>Provides standard debug output to console</td>
        </tr>
        <tr>
          <td>verbose</td>
          <td>True</td>
          <td>Provides ancillary debug output to console</td>
        </tr>
        <tr>
          <td>error</td>
          <td colspan="2">
            <div class="code">
      error   : {
        method    : 'The method you called is not defined.'
      }
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

</div>
        <div class="ui  vertical footer segment">
  <div class="ui center aligned container">
    <div class="ui stackable grid">
      <div class="three wide column">
        <h4 class="ui header">Community</h4>
        <div class="ui link list">
          <a class="item" href="https://www.transifex.com/organization/semantic-org/" target="_blank">Help Translate</a>
          <a class="item" href="https://github.com/Semantic-Org/Semantic-UI/issues" target="_blank">Submit an Issue</a>
          <a class="item" href="https://gitter.im/Semantic-Org/Semantic-UI" target="_blank">Join our Chat</a>
          <a class="item" href="/cla.html" target="_blank">CLA</a>
        </div>
      </div>
      <div class="three wide column">
        <h4 class="ui header">Network</h4>
        <div class="ui link list">
          <a class="item" href="https://github.com/Semantic-Org/Semantic-UI" target="_blank">GitHub Repo</a>
          <a class="item" href="http://forums.semantic-ui.com" target="_blank">User Forums</a>
          <a class="item" href="http://1.semantic-ui.com">1.x Docs</a>
          <a class="item" href="http://legacy.semantic-ui.com">0.x Docs</a>
        </div>
      </div>
      <div class="seven wide right floated column">
        <h4 class="ui header">Help Preserve This Project</h4>
        <p> Support for the continued development of Semantic UI comes directly from the community.</p>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
          <input type="hidden" name="cmd" value="_s-xclick">
          <input type="hidden" name="hosted_button_id" value="7ZAF2Q8DBZAQL">
          <button type="submit" class="ui large teal button">Donate Today</button>
        </form>
      </div>
    </div>
    <div class="ui section divider"></div>
    <img src="/images/logo.png" class="ui centered mini image">
    <div class="ui horizontal small divided link list">
      <a class="item" href="http://semantic-ui.mit-license.org/" target="_blank">Free & Open Source (MIT)</a>
    </div>
  </div>
</div>

      </div>
    </div>
  </div>
  <div class="ui basic language modal">
  <i class="close icon"></i>
  <div class="header">The <span class="name"></span> Translation Needs Your Help</div>
  <div class="image content">
    <div class="middle aligned image">
      <i class="world icon"></i>
    </div>
    <div class="description">
      <p>This translation is only <b><span class="complete"></span>%</b> complete!</p>
      <div class="ui inverted indicating progress">
        <div class="bar"></div>
      </div>
      <p>We need your help to make Semantic available to  people who speak your language.</p>
      <p>Our translation tools are easy to use and allow you to translate text without having to leave the site.
      </p>
    </div>
  </div>
  <div class="actions">
    <div class="ui inverted cancel button">No Thanks</div>
    <a href="https://github.com/Semantic-Org/Semantic-UI/wiki/Translating-Semantic-UI-Docs" target="_blank" class="ui inverted approve teal button">
      <i class="mail icon"></i>
      Help Translate
    </a>
  </div>
</div>

<div class="ui basic chinese modal">
  <i class="close icon"></i>
  <div class="header">Would you like to visit the mirror site?</div>
  <div class="image content">
    <div class="middle aligned image">
      <i class="question icon"></i>
    </div>
    <div class="description">
      <p>Semantic is available at <a href="http://www.semantic-ui.cn">semantic-ui.cn</a> a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.
      </p>
    </div>
  </div>
  <div class="actions">
    <div class="ui inverted red cancel button">No Thanks</div>
    <a href="http://www.semantic-ui.cn" class="ui inverted green approve button">
      <i class="mail icon"></i>
      Yes, take me to the mirror
    </a>
  </div>
</div>
  <div class="ui demo page dimmer">
  <div class="content">
    <div class="center">
      <h2 class="ui inverted icon header">
        <i class="mail icon"></i>
        Dimmer Message
        <div class="sub header">Dimmer sub-header</div>
      </h2>
    </div>
  </div>
</div>
  <script>
window.less = {
  async        : true,
  environment  : 'production',
  fileAsync    : false,
  onReady      : false,
  useFileCache : true
};
</script>

<script src="/javascript/library/less.min.js"></script>


</body>
</html>
